<template>
  <div class="screen-card">
    <aside class="prompt-info">
      温馨提示：以下数据非实时数据，仅供参考，如有任何疑问或建议请致电24小时服务热线12343。
    </aside>
    <h3 class="title">制卡进度</h3>
    <article>
      <div class="progress-card">
        <van-steps
          direction="vertical"
          :active="active"
          active-color="rgb(21, 105, 255)"
        >
          <van-step
            v-for="(item, index) in resultInfo"
            :key="index"
          >
            <h3 style="fontSize: 15px">{{item.businessType}}</h3>
            <p>{{item.businessTime}}</p>
            <p style="fontSize: 12px; color: #ccc">{{item.businessDescription}}</p>
          </van-step>
        </van-steps>
      </div>
    </article>
    <div style="margin: 16px;">
      <van-button
        round
        block
        type="info"
        @click="goHome()"
      >返回</van-button>
    </div>
    <div style="height: 30px"></div>
  </div>
</template>

<script>
export default {
  name: 'cardQueryResult',
  data () {
    return {
      active: 0,
      resultInfo: []
    }
  },
  mounted () {
    for (const item of this.$route.params.data) {
      var time = new Date(item.businessTime)
      item.businessTime = time.getFullYear() + '/' + (time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1) + '/' + (time.getDate() < 10 ? '0' + time.getDate() : time.getDate()) + ' ' + (time.getHours() < 10 ? '0' + time.getHours() : time.getHours()) + ':' + (time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()) + ':' + (time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds())
      console.log(item)
      this.resultInfo.push(item)
    }
    this.active = this.$route.params.data.length - 1
  },
  methods: {
    goHome () {
      this.$router.push({
        name: 'index'
      })
    }
  }
}
</script>

<style scoped lang="less">
.prompt-info {
  background-color: rgb(235, 243, 255);
  box-shadow: 0 0 37.5px #e8e8e8;
  border-radius: 5px;
  padding: 15px 20px;
  color: rgb(21, 105, 255);
  font-size: 16px;
}

.title {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0;
}

.progress-card {
  background-color: #fff;
  box-shadow: 0 0 37.5px #e8e8e8;
  border-radius: 5px;
}
</style>
